<template>
    <div class="footer-page">
      <div class="details_page">
        <div class="top flex flex-between align-center">
          <div class="top_left">
            <img src="../../assets/images/tip-icon.png" alt="tip">
            <span>投诉单状态:
              {{ suggestInfo.status == "MERCHANT_PROCESSING" ? "商家处理中" : suggestInfo.status == "MERCHANT_FEEDBACKED" ? "商家已反馈" : suggestInfo.status == "FINISHED" ? "投诉已完结" : suggestInfo.status == "CANCELLED" ? "投诉已撤销" : suggestInfo.status == "CANCELLED" ? "投诉已撤销": suggestInfo.status == "PLATFORM_PROCESSING" ? "平台处理中": suggestInfo.status == "PLATFORM_FINISH" ? "平台处理完结":"系统关闭" }}
            </span>
          </div>
        </div>
        <div class="bottom_info">
          <div class="orderInfo">
            <div class="mar20">
              <img src="../../assets/images/xcx.png" alt="icon">
              <span class="orderInfo_title">订单信息</span>
            </div>
            <div class="orderInfo_left">
              <div>
                <p>
                  <span>支付宝投诉订单号：</span>
                  <span>{{ suggestInfo.complainEventId }}</span>
                </p>
                <p>
                  投诉单完结时间：
                  <span>{{ suggestInfo.gmtFinished }}</span>
                </p>
                <p>
                  联系手机：
                  <span>{{ suggestInfo.phoneNo }}</span>
                </p>
              </div>
            </div>
            <div class="orderInfo_right">
              <div>
								<p>商家订单号：
                  <span>{{ suggestInfo.merchantOrderNo }}
                  </span>
                </p>
                <p>投诉单创建时间：
                  <span>{{ suggestInfo.gmtCreate }}</span>
                </p>
                <p>交易金额(单位/元)：
                  <span>{{ suggestInfo.tradeAmount }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="orderGoods">
            <div class="mar20">
              <img src="../../assets/images/xcx.png" alt="icon">
              <span class="orderInfo_title">详情说明</span>
            </div>
            <div class="explain">
              <p>用户投诉诉求：
                <span class="red-font">{{ suggestInfo.leafCategoryName }}</span>
              </p>
              <p>用户投诉原因：
                <span class="red-font">
                  {{ suggestInfo.complainReason}}
                </span>
              </p>
              <p>
                用户投诉内容：<span class="red-font">{{ suggestInfo.content }}</span>
              </p>
              <p>
                投诉图片：<span class="red-font">{{ suggestInfo.imagestext }}</span>
              </p>
              <div>
                <el-image 
                  style="width: 150px; height: 150px"
                  :src="imgList[0]" 
                  :preview-src-list="imgList">
                </el-image>
              </div>
            </div>
          </div>
          <div class="orderRecords">
            <div class="mar20">
              <img src="../../assets/images/xcx.png" alt="icon">
              <span class="orderInfo_title">协商记录</span>
            </div>
            <el-table :data="replyDetailInfostext">
              <el-table-column label="角色" prop="replier_role">
                <template slot-scope="scope">
                  <p>
                    {{ scope.row.replier_role == 'SYSTEM' ? "系统":"用户" }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="操作人" prop="replier_name" />
              <el-table-column label="内容" prop="content">
                <template slot-scope="scope">
                  <p>
                    {{ scope.row.content == undefined ? "暂无内容":scope.row.content }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="图片" prop="images">
                <template slot-scope="scope">
                  <el-image v-if="scope.row.images"
                  style="width: 100px; height: 150px"
                  :src="scope.row.images" 
                  :preview-src-list="scope.row.images">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                </template>
              </el-table-column>
              <el-table-column label="时间" prop="gmt_create" />
            </el-table>
          </div>
          <div v-if="suggestInfo.status=='MERCHANT_PROCESSING'||suggestInfo.status=='PLATFORM_PROCESSING'" class="orderRecords" style="margin-top:20px">
            <div class="mar20">
              <img src="../../assets/images/xcx.png" alt="icon">
              <span class="orderInfo_title">投诉反馈</span>
            </div>
            <div class="explain">
              <p>反馈内容：
                <div class="red-font">
										<el-input type="textarea" :rows="2" placeholder="请输入反馈内容" v-model="form.complete_content"></el-input>
								</div>
              </p>
              <p>添加图片：
                <div class="red-font">
									<!-- <crop-upload ref="cropUpload" :multiple="true" show-type="photo" :hide-delete="true" :init-val="form.imgUrl" wrapper-width="100px" wrapper-height="100px" :photo-width="100" :photo-height="100" @setVal="imgChange" /> -->
                      <crop-upload show-type="photo" :init-val="form.complete_img" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('photo', val)" />
								</div>
              </p>
              <p style="margin-top: 20px;">
                <el-button type="primary" @click="submit()">提交</el-button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer setBtn">
        <el-button type="primary" @click="toClose()">关闭</el-button>
      </div>
      <dispose ref="disposes" :suggest-id="suggestId" />
      <note-records ref="noteRecord" :suggest-id="suggestId" />
    </div>
  </template>
  
  <script>
  import { complainDetail,complainfeedback,complainimage } from '@/api/complaint'
  import dispose from './dailog/dispose'
  import noteRecords from './dailog/noteRecords'
	import cropUpload from '@/components/cropUpload'
  
  export default {
    // props: ['id'],
    components: { dispose, noteRecords,cropUpload },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        suggestInfo: {},
        replyDetailInfostext: [],
        imgList: [],
        suggestId: '',
				form:{
					id:'',
					complete_content:'',
					imgId:'',
					complete_img:''
				}
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        complainDetail(this.id).then((res) => {
          this.suggestInfo = res
          this.suggestList = res.suggestLog
          this.imgList = res.images
          this.replyDetailInfostext=res.replyDetailInfos
        })
      },
      toClose() {
        this.$router.go(-1)
      },
      intervene(id) {
        this.suggestId = id
        this.$refs.disposes.dialogVisible = true
      },
      remark(id) {
        this.suggestId = id
        this.$refs.noteRecord.dialogVisible = true
      },
			setUrl(key, value) {
				this.form.complete_img= value
        let data={
          id:this.id,
          imgurl:this.form.complete_img
        }
        complainimage(data).then(res=>{
          console.log(res)
          this.form.imgId=res.data.image_id
        })
			},
      submit(){
        let data={
          content:this.form.complete_content,
          id:this.id,
          imgId:this.form.imgId
        }
        if(data.complete_content==""||data.imgId==""){
          this.$message({
            message: '提交内容或图片不能为空！',
              type: 'warning'
          })
          return
        }
        complainfeedback(data).then(res=>{
          this.$message({
            message: '操作成功！',
              type: 'success'
          })
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .footer-page {
    padding-bottom: 0;
  }
  
  img {
    vertical-align: middle;
    margin-right: 17px;
  }
  
  .mar20 {
    margin-bottom: 20px;
  }
  
  .details_page {
    border: 1px solid #e6e6e6;
  
    .top {
      height: 80px;
      background: #f5f5f5;
      padding: 0 12px 0 25px;
  
      .top_left {
        img {
          width: 36px;
          height: 36px;
        }
  
        span {
          font-size: 22px;
          font-weight: bold;
          color: #ff4247;
          vertical-align: middle;
        }
      }
      .top_right {
        .btns {
          height: 40px;
          border-radius: 3px;
        }
      }
    }
  
    .bottom_info {
      padding: 30px 30px 80px;
  
      .orderGoods {
        margin-bottom: 30px;
  
        .goodsImg {
          width: 50px;
          height: 50px;
          float: left;
        }
  
        .p1 {
          color: #2891fb;
        }
  
        .p2 {
          color: #999999;
        }
  
        .explain {
          border: 1px solid #e6e6e6;
          padding: 20px;
  
          p {
            line-height: 35px;
          }
  
          div {
            padding-left: 70px;
            margin-top: 5px;
          }
  
          img {
            width: 90px;
            height: 90px;
          }
        }
      }
  
      .orderInfo {
        height: 180px;
  
        .orderInfo_title {
          font-size: 16px;
          color: #666666;
          vertical-align: middle;
        }
  
        p {
          line-height: 35px;
        }
  
        .orderInfo_left,
        .orderInfo_right {
          width: 50%;
          float: left;
        }
  
        .checkBtn {
          margin-left: 15px;
        }
      }
    }
  }
  
  .setBtn {
    text-align: center;
    margin-top: 30px;
    //   border-top: 1px solid #eee;
    height: 70px;
    line-height: 70px;
  }
  
  /deep/.preview_img {
    display: inline-block;
    padding-left: 0 !important;
    margin-right: 10px;
  }
	.explain {
		border: 1px solid #e6e6e6;
		padding: 20px;
		p {
			line-height: 35px;
		}
		div {
			margin-top: 5px;
		}
		img {
			width: 90px;
			height: 90px;
		}
	}
  </style>
  